<template>
  <div>
    <!-- 返回 -->
    <!-- {{productId}} -->
    <router-link :to="{name:'GoodsDetails',params:{id:productId}}" style="text-decoration: none;"><el-page-header content="详情页面">
    </el-page-header></router-link>

    <el-row>
      <el-col :span="12" offset="2">
        <!-- <img
          style="width: 460px; height: 460px"
          src="https://assets.hermes.cn/is/image/hermesproduct/gamma%E7%9A%AE%E5%B8%A6%E6%89%A3-%E5%8F%8C%E9%9D%A2%E7%9A%AE%E8%85%B0%E5%B8%A613%E6%AF%AB%E7%B1%B3--beltkit-13-065538CAWI_composite_2-065985CDZ2_front_1-300-0-800-800_b.jpg"
        /> -->
        <img style="width: 460px; height: 460px" :src="require(`./image/${productNo.image}.jpg`)"/>
      </el-col>

      <el-col :span="7" class="infodiv1">
        <p>{{ productNo.productName }}</p>
        <p>单价￥{{ productNo.productPrice }}</p>
        <el-divider></el-divider>
        <p>商品类别:{{ typeName }}</p>
        <el-divider></el-divider>
        <p>Gamma 镀黄铜色 / 粉金色</p>
        <el-divider></el-divider>
        <p>库存数量:{{productNo.inventory}}</p>
        <el-divider></el-divider>
        数量:
        <!-- 数量选择框 -->
        <div @click="getCount()">
          <el-input-number size="mini" v-model="count" :disabled="false" :min="1" :max="productNo.inventory"></el-input-number>
        </div>
        <div style="margin-top: 20px">
          <el-divider></el-divider>
          <el-button type="primary" style="margin-bottom:23px;margin-top:0px" @click="addCart()">
            加入购物袋
          </el-button>
        </div>
      </el-col>
      <el-col :span="1"></el-col>
    </el-row>

      <!-- {{count}} -->
  <!-- {{productNo}}
  {{CartVo.username}} -->
  <!-- {{count}}
  {{CartVo}} -->

  </div>
</template>

<script>
export default {
  created(){
    
  },
  data() {
    return {
      productId: this.$route.params.productId,//商品类型
      typeName: this.$route.params.typeName,//类别名
      productNo: this.$route.params.productNo,//接收商品对象
      id:this.$route.params.id,//类别id

      CartVo: {
        productId: "",//商品id
        count: 1,//商品数量
        user: JSON.parse(sessionStorage.getItem("user")),//用户信息
        createTime: "",//创建时间
        updateTime: ""//修改时间
      },
      count: 1,//商品数量
    };
  },
  mounted(){
    //初始化数据
    this.CartVo.productId = this.productNo.productId
    this.CartVo.count = this.count
  },
  methods:{

      goBack(productId) {
        this.$router.push({
          path:"GoodsDetails",
          params:{
            // typeName: vm.typeName,
            // productNo: vm.productNo,
            id: productId
          }
        }
      )//路由跳转

      console.log(productId)

    },
    addCart(){
        let vm = this
        var cartvo = vm.CartVo
        console.log(cartvo)
        this.axios.post("http://localhost:8080/cart/addCart", cartvo)
        .then((res) => {
          if(res.data.message != null){
            this.$message({
              message: res.data.message,
              type: 'success'
            })
          }else{
            this.$message({
              message: '插入失败~',
              type: 'error'
            })
          }
        });
    },
    getCount(){
      this.CartVo.count = this.count
      // alert(this.CartVo.count)
    }
    
  }
};
</script>

<style scope>
.infodiv1 {
  background-color: rgb(245, 248, 248);
}
</style>